<template>
  <div>
    <van-cell center>
     <div class="BOX clearfix">
        <div slot="title" class="breadBox left">
          <div class="breadImg" @click="showPopup = true">
          <img style="width:70%" :src="item.goodsImgs[0]" alt="">
          </div>
        </div>
        <div class="right">
           <div slot="default">{{item.goodsName}}</div>
           <div slot="default">$ {{item.goodsPrice}}.00</div>
           <br>
           <!-- 步进器 加减商品数量 -->
           <van-stepper
            v-model="value"
            min="0"
            :disable-input="true"
            theme="round"
            :max="MAX"
            button-size="42"
            @plus="onPlus"
            @minus="onMinus"
           />
        </div>
     </div>

    </van-cell>
    <van-popup v-model="showPopup">
      <img style="width:100%" :src="item.goodsImgs[0]" alt="">
    </van-popup>
  </div>
</template>

<script>
import { getGoodsList } from '@/api/goods.js'
export default {
  props: {
    milkPrice: {
      type: Number
    },
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      value: 0, // 步进器默认值
      number: null, // 当前步进器的值
      showPopup: false, // 商品放大的弹出层
      MAX: 0 // 最大值 即库存
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    onPlus() {
      this.$parent.$parent.$parent.milkPrice = this.milkPrice + this.item.goodsPrice * 1
      this.$emit('Plus', this.item)
    },
    onMinus() {
      this.$parent.$parent.$parent.milkPrice = this.milkPrice - this.item.goodsPrice * 1
      this.$emit('Minus', this.item)
    },
    async getGoodsList() { // 只为了得到商品的库存量  作为步进器的上限
      const { data } = await getGoodsList()
      for (var i = 0; i < data.length; i++) {
        if (this.item.id === data[i].id) {
          this.MAX = data[i].goodsStock
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
  .clearfix:after {
            content: '';
            clear: both;
            display: block;
        }
  .van-cell {
    margin-top: 30px;
    width: 530px;
    height: 240px;
  }
  .van-cell__value--alone {
    text-align: right;
  }
 .BOX {
    .left {
      float: left;
    }
    .right {
      float: right;
    }
    .breadBox {
   width: 220px;
   height: 220px;
   margin: 0 auto;
    .breadImg {
      text-align: center;
      bottom: 0 !important;
      }
    }
 }
</style>
